import { ProTable } from '@ant-design/pro-components';
import { useRef, useState } from 'react';
import type { ActionType } from '@ant-design/pro-components';
import getColumns from './columns';
import { medicineHistory } from '@/services/medicine'
import { Space } from 'antd'
import { proTableFormat, sortTransform } from '@/utils/format'

export default (props) => {
    const { name } = props;
    const actionRef = useRef<ActionType>();
    const columns = getColumns();
    const [kc, setKC] = useState(0);
    const [totalMoney, setTotalMoney] = useState(0);
    return (
        <>
            <ProTable
                columns={columns}
                actionRef={actionRef}
                cardBordered
                request={async (params, sort, filter) => {
                    const { pageInfo, data } = await medicineHistory({ ...params, name, currentPage: params.current, sort: sortTransform(sort) });
                    setKC(data?.entercount || 0)
                    setTotalMoney(data?.totalprice || 0)
                    return proTableFormat(pageInfo)
                }}
                rowKey="id"
                search={{
                    labelWidth: 'auto',
                    span: 6
                }}
                options={{
                    setting: true,
                    reload: false
                }}
                pagination={{
                    pageSize: 10,
                }}
                dateFormatter="string"
                // 表格新建栏
                toolBarRender={() => {
                    return [
                        <Space>
                            <span>总计金额：￥{totalMoney}</span>
                            <span>总库存数：{kc}</span>
                        </Space>
                    ]
                }}
            />
        </>

    );
};